<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_固定定位全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,.3);
            position: fixed;
            top:0;
            left:0;
            right: 0;
            bottom:0;
        }
    </style>
</head>
<body>
<div class="mask">
    <div></div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab blanditiis expedita harum itaque, mollitia nesciunt
    officia provident vero! Atque deleniti excepturi in magni necessitatibus officiis quod tempore voluptates. Eos,
    quae.
</div>
<div>A ad amet at aut commodi deleniti dolor, ea eaque earum eos eveniet excepturi facere harum illo itaque labore
    laudantium nobis nulla obcaecati officia quibusdam sed similique temporibus totam voluptates?
</div>
<div>Accusamus, aspernatur beatae commodi consectetur culpa dolorum eos excepturi expedita impedit minus nemo nisi non,
    odio qui quod quos ratione saepe sequi voluptate, voluptatum! Dolorum expedita explicabo labore minus nisi!
</div>
<div>Aperiam dolores dolorum eligendi fugiat maiores nostrum perferendis suscipit. At corporis distinctio dolor ducimus
    explicabo temporibus, vel voluptatem? Assumenda cum deleniti deserunt dolores eius voluptatum? Dicta modi quis
    quisquam velit?
</div>
<div>Amet error esse non quae quod rem rerum. Amet, aperiam cum cumque delectus eum non praesentium veritatis! Ad amet
    animi consequatur dolores et excepturi harum impedit non officia recusandae. Distinctio.
</div>
<div>A adipisci aperiam atque consequuntur deserunt, dolore dolores ea, error eum excepturi fuga harum mollitia
    perspiciatis, praesentium quam quisquam quod reiciendis repellendus saepe temporibus. Labore laborum odio quisquam
    recusandae rem.
</div>
<div>Atque, consequuntur doloribus facere inventore, libero modi molestias nihil, obcaecati officia perspiciatis porro
    quaerat quo quod rem reprehenderit sunt voluptatum? Cupiditate dolorum eius fugit ipsam iste mollitia pariatur
    possimus veniam?
</div>
<div>Adipisci aliquid doloribus eos ex labore molestiae repudiandae sint ullam. Alias architecto delectus dolorem
    doloremque dolorum, eum eveniet facere labore natus, nihil nobis, numquam quibusdam quo ratione recusandae sed
    veritatis.
</div>
<div>Aliquid consectetur corporis, ducimus ea eos eveniet ex facere fugit in itaque maiores maxime nam quibusdam quidem
    quo quos recusandae sapiente sit tempore tenetur? Ab harum illo inventore nostrum quidem?
</div>
<div>Ab asperiores, cum cumque delectus enim eos ex hic maxime molestias neque quos sed tempore totam. Animi autem culpa
    eos esse minima modi, nostrum praesentium repellendus rerum tempore tenetur voluptates.
</div>
<div>Ab animi asperiores atque consectetur consequatur debitis doloribus, ea eius eligendi eos explicabo ipsam labore
    nam nemo omnis optio placeat possimus quisquam temporibus ut. Alias dolor ea quam rem veritatis!
</div>
<div>Accusantium consectetur, consequuntur dicta doloremque doloribus earum eum inventore ipsa iure laborum magni, nemo,
    nostrum numquam omnis quasi sed sit unde! Dolorem dolores molestias nam natus nesciunt unde, ut voluptatem.
</div>
<div>Aliquam aliquid aut, deserunt dignissimos enim eos minus nobis omnis perferendis, placeat quae quibusdam quis
    reiciendis repellat sed veritatis, vero. Assumenda facilis fugiat impedit mollitia natus placeat quisquam. Iure,
    obcaecati!
</div>
<div>Cum dicta impedit iure molestiae perferendis reiciendis totam. Atque dolorum placeat recusandae reprehenderit!
    Dolorem, excepturi, quas. Adipisci corporis culpa dolore laborum numquam officia quas quisquam repellendus sapiente
    sint, sit ullam!
</div>
<div>Accusamus aliquam architecto beatae commodi delectus dicta doloremque enim eveniet inventore, ipsam ipsum iure
    iusto nam, nesciunt officiis perferendis praesentium quaerat quasi repellendus sed ut vel veritatis voluptas
    voluptate voluptatibus?
</div>
<div>Ab alias aliquam aliquid architecto autem commodi, deleniti ducimus enim expedita explicabo facere illo ipsum, iste
    itaque laboriosam molestias, perspiciatis praesentium quis quisquam quos rerum tenetur totam ut. Aliquid, voluptas.
</div>
<div>Ab beatae debitis ea esse ipsam iste modi mollitia perspiciatis, quibusdam quidem quisquam quod reiciendis
    similique sint ullam velit voluptatem? Cum dolore dolores et fuga non reprehenderit vitae voluptatum. Tempora.
</div>
<div>Eligendi error nulla numquam quasi. Consequuntur cum debitis deleniti distinctio et eum, explicabo fugit nam
    nostrum placeat sed, temporibus ullam vero. Aliquam commodi cum dicta doloremque, maxime perferendis quasi unde?
</div>
<div>Alias dolores eligendi est facere fugit non nulla omnis, quaerat similique sit. Ea fugiat in minus omnis quae rerum
    voluptatem! Aspernatur dolor error hic nesciunt optio quo ratione voluptate voluptatibus.
</div>
<div>Error omnis totam ullam voluptatibus. Consequuntur facere itaque modi nihil praesentium reiciendis repellat
    repellendus? Ad debitis ex expedita fugiat ipsam ipsum minus odit sapiente similique ullam! Dicta earum expedita
    explicabo!
</div>
<div>Ad autem corporis culpa delectus deleniti dolorum earum est id minus modi nulla numquam perspiciatis praesentium
    quaerat quia quis repellendus tenetur, ut vel veritatis. Blanditiis molestiae quos vel voluptas voluptatibus.
</div>
<div>Blanditiis debitis dolor neque saepe sed tenetur voluptatem! Debitis distinctio esse illum laudantium maiores
    quibusdam saepe sunt voluptas! Eum ex fuga fugiat laboriosam laudantium minus molestiae quam repellendus suscipit
    tempore.
</div>
<div>Fugiat hic inventore libero officiis praesentium quibusdam vitae! Atque aut deleniti est iste libero non odit
    officiis optio sint suscipit? Amet corporis deleniti impedit laudantium odit omnis quaerat quas tenetur.
</div>
<div>Alias asperiores dolores hic maiores numquam officiis qui, quia sed voluptatum. A debitis doloribus eaque earum
    exercitationem fugit hic molestiae nemo obcaecati odio pariatur, possimus provident qui similique unde ut.
</div>
<div>Ab commodi consequuntur deserunt distinctio dolor dolore dolorum, eum excepturi facilis harum minima nemo nihil
    nostrum officia possimus quae quaerat quo quod recusandae sint temporibus, tenetur ullam, unde! Facere, nisi.
</div>
<div>Earum eveniet laudantium nam qui sed? Aliquid eveniet ex facere fugit magnam praesentium quam repellendus
    reprehenderit, rerum? Accusamus architecto, est fugit labore nobis placeat provident quo saepe similique sit.
    Ratione.
</div>
<div>A accusantium, aspernatur aut dolorem ducimus error expedita facere facilis, fuga illo impedit ipsam iste magni
    maiores minus modi mollitia neque numquam possimus quae quaerat repellendus totam veritatis voluptates voluptatibus?
</div>
<div>Amet architecto atque dolore, doloribus eius eligendi excepturi laboriosam magni mollitia non omnis perferendis
    possimus quaerat quidem soluta, tempora unde. Dolor facilis, repellendus! At maiores, odit quasi quisquam quos
    velit.
</div>
<div>Accusamus asperiores eius harum iure iusto maiores vitae. Distinctio, reiciendis ullam! Asperiores atque autem
    beatae delectus deleniti, dolores ducimus error, inventore laboriosam omnis perferendis quam quasi, suscipit unde
    veritatis voluptatem!
</div>
<div>Accusantium ad amet animi blanditiis dolore doloremque eaque error et fuga, fugiat ipsum iste itaque minima nam
    natus nobis numquam officiis placeat porro quae reiciendis sunt tempore tenetur totam voluptate.
</div>
<div>Accusamus adipisci, alias aperiam commodi cumque cupiditate deleniti eos excepturi exercitationem illum in ipsam
    iusto minus molestiae neque numquam perferendis possimus, quam quasi quod ratione sequi, temporibus velit voluptates
    voluptatibus.
</div>
<div>Autem commodi consequatur deleniti distinctio dolor dolore eaque et fugit id incidunt inventore laudantium
    molestias mollitia nam nihil odio odit provident quas quia quos repellat saepe suscipit, velit veniam voluptate?
</div>
<div>Alias blanditiis consectetur corporis dicta, doloremque ea facere itaque labore magni, maiores nulla numquam
    obcaecati perferendis possimus quae quam quibusdam quis, tempore ut voluptas? Accusamus deserunt hic minus mollitia
    suscipit.
</div>
<div>Consequatur consequuntur cum, deleniti deserunt distinctio dolor error explicabo facilis harum id minus modi
    molestiae numquam officiis, pariatur possimus quam rerum sequi similique suscipit? Laudantium nesciunt provident
    quas vitae voluptates?
</div>
<div>Debitis dignissimos explicabo facilis, fuga minus similique tempora voluptate. Animi aperiam, asperiores, aut
    commodi culpa earum eius expedita maiores, molestiae quibusdam quos reiciendis! Aliquam eveniet impedit quae soluta
    ullam, veniam.
</div>
<div>Consectetur cupiditate eligendi id inventore ipsa, nostrum officia pariatur praesentium provident, rem sint sunt? A
    accusantium, aliquid eaque error inventore labore neque nihil odio quisquam sapiente suscipit, tempora tempore
    totam!
</div>
<div>Ab, amet aperiam cupiditate dolor enim facere fuga fugiat harum, minima natus nobis porro tenetur ut. Adipisci,
    consectetur ducimus eos illo ipsa, laboriosam neque quidem temporibus unde ut, velit voluptatibus.
</div>
<div>A aliquid architecto, deleniti eius enim error exercitationem expedita fugiat labore minus molestiae nemo numquam
    optio quia saepe sit tempora tempore tenetur? Blanditiis, debitis dignissimos fuga itaque obcaecati tempora
    voluptate!
</div>
<div>Aliquam architecto aspernatur corporis cum debitis, deleniti eaque earum iste itaque minima perspiciatis quaerat,
    quia quisquam reprehenderit sit. Aliquam aut consectetur impedit iure molestiae nesciunt porro quas quibusdam vel!
    Distinctio!
</div>
<div>Accusamus aliquid amet ea harum hic minima sint, suscipit. A amet consequatur fugit harum illum labore, laudantium
    rem sed vel! Ab autem consequatur deleniti dignissimos, incidunt inventore maiores ratione reprehenderit.
</div>
<div>Accusamus aperiam delectus dicta dolorum eos fugiat in inventore ipsam iure provident quaerat quasi quo quos,
    repellendus sit sunt voluptas? Alias consequatur, facilis laboriosam molestias nesciunt obcaecati quasi sapiente
    voluptatibus.
</div>
<div>Accusamus ad commodi consequatur dicta dolor dolorum, eligendi eos error explicabo impedit incidunt laborum
    laudantium libero molestiae molestias nam nulla odio officiis quam sed sint totam ut vel veritatis vero?
</div>
<div>Ad amet assumenda cum, dolores ea eum exercitationem explicabo ipsam iusto maiores minima natus nihil quia saepe
    suscipit tempore voluptas? Beatae cumque eum nam, neque nisi nulla quibusdam soluta temporibus.
</div>
<div>Debitis dolorum et id inventore, maiores natus optio pariatur perferendis placeat, provident quam repellat
    reprehenderit, repudiandae rerum sequi. Dolor eveniet id iusto necessitatibus omnis quidem quos repellat sunt
    voluptate voluptatum.
</div>
<div>Expedita hic maiores minima nostrum quas sequi soluta vitae! Delectus, dicta, eum. Aliquam, consectetur deserunt
    dicta ea eveniet ex expedita explicabo facere fugiat, impedit numquam obcaecati odit quisquam veniam veritatis!
</div>
<div>Accusantium architecto inventore, nobis numquam obcaecati quos recusandae! Accusantium aliquid architecto atque
    beatae commodi dolore hic ipsa magni molestiae mollitia necessitatibus nemo quaerat quo rem, sint veritatis vero
    voluptas voluptatibus.
</div>
<div>A, consequuntur doloribus impedit incidunt quis voluptatum. Accusantium autem cupiditate dicta, eaque error labore
    nostrum quasi quis rem vitae. Alias eum ipsa ipsam magni, nam nemo neque ratione sapiente soluta?
</div>
<div>Ab, at autem error, facere harum, libero mollitia nam nisi officia pariatur praesentium quibusdam velit voluptatem.
    Animi asperiores neque, nisi odio optio perspiciatis placeat quam totam! Laboriosam minima rerum sint?
</div>
<div>Corporis culpa cum dolores ex fuga in inventore maxime pariatur rerum veritatis! Ad consectetur, consequatur
    dolorem et eum fuga ipsum nemo nihil non pariatur provident quae ratione sapiente totam velit!
</div>
<div>Adipisci dolores obcaecati qui! Accusamus consequuntur cumque enim eum, id omnis perferendis porro sequi
    temporibus? Amet consectetur, corporis, error illum incidunt maxime odit officia porro reiciendis similique sint
    temporibus veritatis.
</div>

</body>
</html>